<template>
	<view class="content">
		<view class="logocard">
			<image class="logo" src="@/static/images/01.png" mode=""></image>
			<view class="logotext">
				专业洗护
			</view>
		</view>
		<view class="cardmenu">
			<view class="userinfoeditcard">
				<view class="userinfo">
					<image class="avater" src="../../static/logo.png" mode=""></image>
					<view class="info">
						<view class="username">
							用户名
						</view>
						<view class="phone">
							199****7641
						</view>
					</view>
				</view>
				<view class="editcard" @click="goexchangeuser">
					<u-icon name="edit-pen" color="#c8c6bc" size="28"></u-icon>
				</view>
			</view>
			<view class="menu">
				<view class="orderlisttext" @click="orderlist(0)">
					<view class="addresslist">
						我的订单
					</view>
					<view class="iconcard">
						>
					</view>
				</view>
				<view class="orderlist">
					<view class="place" @click="orderlist(0)">
						全部
					</view>
					<view class="place" @click="orderlist(1)">
						进行中
					</view>
					<view class="place" @click="orderlist(2)">
						已完结
					</view>
				</view>

			</view>

			<view class="addresscard" @click="goaddresslist">
				<view class="addresslist">
					我的地址
				</view>
				<view class="iconcard">
					>
				</view>
			</view>



		</view>

		<!-- <u-swiper style="width: 100%;" :list="list1" @change="change" @click="click"></u-swiper> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				list1: [
					require('@/static/images/01.png'),
					require('@/static/images/01.png'),
					require('@/static/images/01.png')
				]
			}
		},
		onLoad() {

		},
		methods: {
			change() {

			},
			click() {

			},
			goaddresslist() {
				uni.navigateTo({
					url: '/pages/addresslist/addresslist'
				})
			},
			goexchangeuser(){
				uni.navigateTo({
					url: '/pages/exchangeuser/exchangeuser'
				})
			},
			orderlist(index){
				wx.setStorageSync('changeorder',index)
				uni.reLaunch({
					url:`/pages/home/home`
				})
				
			}
		}
	}
</script>

<style lang="less">
	.content {

		width: 100%;
		height: 100vh;
		background-color: #d7d7d7;
		position: relative;
	}

	.logocard {
		width: 100%;
		height: 260px;
		position: relative;

		.logo {
			width: 100%;
			height: 260px;
		}

		.logotext {
			position: absolute;
			top: 50%;
			left: 30%;
			font-size: 24px;
			color: blue;
		}
	}

	.cardmenu {
		width: 100%;
		height: calc(100vh - 160px);
		background: #f0eeee8c;
		position: absolute;
		top: 160px;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 20px 20px 0 0;

		.userinfoeditcard {
			width: 90%;
			height: 130px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			border-radius: 20px;
			box-shadow: 1px 1px 2px 0px #c7c5c5;
			position: relative;
			left: 50%;
			transform: translateX(-50%);
			
			.editcard {
				padding-right: 10px;
			}
		}

		.userinfo {
			width: 80%;
			height: 130px;
			//background: orange;

			display: flex;
			align-items: center;
			padding: 10px;
			box-sizing: border-box;
			border-radius: 20px;

			.avater {
				width: 70px;
				height: 70px;
				border-radius: 50%;
				margin-right: 20px;
			}

			.info {
				display: flex;
				flex-direction: column;

				.username {
					font-size: 18px;
				}

				.phone {
					font-size: 14px;
					margin-top: 10px;
				}
			}
		}

		.menu {
			width: 90%;
			height: 150px;
			 background: #fff;
					box-shadow: 1px 1px 2px 0px #c7c5c5;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			border-radius: 20px;
			padding: 0 10px;
			box-sizing: border-box;
			margin-top: 10px;
			position: relative;
			left: 50%;
			transform: translateX(-50%);

			.orderlisttext {
				display: flex;
				justify-content: space-between;
			}

			.orderlist {
				display: flex;
				justify-content: space-between;

				.place {
					width: 30%;
					height: 90px;
					border: 1px solid;
					border-radius: 20px;
				}
			}

		}

		.addresscard {
			width: 90%;
			height: 60px;
			display: flex;
			margin-top: 10px;
			 background: #fff;
			border-radius: 20px;
			justify-content: space-between;
			box-shadow: 1px 1px 2px 0px #c7c5c5;
			align-items: center;
			box-sizing: border-box;
			padding: 0 10px;
			position: relative;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>